<template>
<osc-navpage
    class="personal-root"
    title="采购单详情"
    height="100"
    titleColor="#000"
    backgroundColor="#eff3f2"
    leftItemSrc="https://github.com/osmartian/weex-frame/blob/master/src/views/personal/imgs/common_goback.png?raw=true"
    @naviBarLeftItemClick="naviBarLeftItemClick">

    <div class="head">
      <div class="tittle">
        <text class="text-tittle">基本资料</text>
      </div>
      <div class="panel">
        <text class="text">供应商:</text>
        <input ref="input" class="input" type="text"  name="supply" @input="supplyInput" :value="supply"></input>
      </div>
      <div class="panel">
        <text class="text">要求到货日期:</text>
        <text class="text">{{date}}</text>
        <!-- <input ref="input" class="input" type="text"  name="date" @input="dateInput" :value="date"></input> -->
        <div @click="pickTime" class="input"></div>
      </div>
      <div class="panel">
        <text class="text">备注:</text>
        <input ref="input" class="input" type="text"  name="memo"></input>
      </div>
    </div>

    <div class="body">

      <div class="tittle">
        <text class="text-tittle">采购单原料</text>
      </div>

      <list class="list">
        <cell class="cell" v-for="purchaseDetail in lists">
          
          <div class="cell-head">
            <text class="text-system">原料:</text>
            <text class="text">{{purchaseDetail.goodsName}}</text>
          </div>
          
          <div class="cell-bottom">
            <text class="text-system">数量:</text>
            <text class="text">{{purchaseDetail.num}}</text>
            <text class="text">{{purchaseDetail.unit}}</text>
          </div>
          
        </cell>

        <cell class="cell-add" @click="addPaperGoods">
          <div class="add">
            <image class="img" src="https://olwr1lamu.qnssl.com/%E6%B7%BB%E5%8A%A0.png" ></image> 
            <text class="text-add">添加采购原料……</text>
          </div>
        </cell>

      </list>

      <div class="btn" @click="save">
        <text class="text-save">保存</text>
      </div>

    </div>
  </osc-navpage> 
</template>

<script>
import route from 'router/page'
import mixins from 'mixins'

const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
const stream = weex.requireModule('stream')
const picker = weex.requireModule('picker')

export default {
  data () {
    return {
      date: '',
      refreshing: false,
      lists: [
      // {id : 'guodanhao', entityId :'888888', goodsId : '1111', goodsName : '原料1号', num:10, unit:'个'}
      ]
    }
  },
  mixins: [mixins],
  methods: {
    
    naviBarLeftItemClick () {
      this.router.pop()
    },
    onrefresh (event) {
      modal.toast({ message: '刷新中', duration: 1 })
      this.refreshing = true
      setTimeout(() => {
        this.refreshing = false
      }, 200)
    },
    supplyInput(event) {
      this.supply = event.value
    },
    dateInput(event) {
      this.date = event.value
    },
    pickTime () {
        picker.pickDate({
          value: this.value
        }, event => {
          if (event.result === 'success') {
            this.date = event.data.replace(/-/g, '')
          }
        })
    },
    addPaperGoods () {
      
      modal.confirm({
          message: '需保存采购单信息，才能添加采购单原料，确认吗？',
          duration: 0.3
      }, callback => {

          if (callback == 'OK') {
            stream.fetch({
            method: 'POST',
            type: 'JSON',
            url: this.imgUrl.collect.computerUrl + 'savePurchaseInfo',
            body: 'supply=' + this.supply + '&date=' + this.date
            }, callback => {
                const purchaseInfoId = callback.data
                storage.setItem('id', purchaseInfoId, event => {
                  console.log('set success')
                })
            })

            // let purchaseInfoid = '';
            // storage.getItem('id', event => {
            //     purchaseInfoid = event.data
            //     modal.toast({ message: purchaseInfoid, duration: 1 })
            // })

            this.router.push({
               page: this.routerPage.addPaperGoods
               // query: 
            })
          }
      })
    },
    onclick (item) {
      // modal.toast({ message: '刷新中', duration: 1 })
      // 跳转到添加页面
      this.router.push({
         page: this.routerPage.addPurchaseDetail
         // ,query: item.no
      })
    }
  }, 
  created () {
    // const no = navigator.getParams()
    // modal.toast({ message: no, duration: 1 })
    // stream.fetch({
    //   method: 'GET',
    //   type: 'json',
    //   url: 'http://192.168.1.100:9001/getPurchaseDetailByNo?no+' + no
    // }, callback => {
    //     // modal.toast({ message: '11111', duration: 1 })
    //     this.lists = callback.data
    //     modal.toast({ message: callback.data, duration: 1 })
    // })
  }
}
</script>

<style>
    .btn {
      justify-content: center;
      align-items: center;
      height: 90px;
      width: 350px;
      background-color: #00CC00;
      border:2px solid;
      border-radius:10px;
      margin-top: 50px;
      margin-left: 200px;
    }

  .add {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

	.text {
    margin-left: 10px;
    flex-direction: row;
    font-size: 42px;
    color: #41B883;
  }
  .tittle {
    height: 100px;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #669999;
  }
  .text-save {
    flex-direction: row;
    font-size: 50px;
    color: #ffffff;
  }
  .text-tittle {
    margin-left: 10px;
    padding-top: 20px;
    flex-direction: row;
    font-size: 50px;
  }
  .panel {
    padding-top: 20px;
    width: 750px;
    height: 100px;
    flex-direction: row;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
  }
  .cell {
    padding-top: 50px;
    padding-left: 30px;
    flex-direction: row;
    width: 750px;
    height: 170px;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
  }
  .cell-bottom{
    margin-left: 150px;
    flex-direction: row;
  }
  .cell-head {
    flex-direction: row;
  }
  .cell-add {
    justify-content: center;
    align-items: center;
    width: 750px;
    height: 170px;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
  }
  .text-add {
    color: #CC0000;
    font-size: 40px;
  }
  .text-system {
    flex-direction: row;
    font-size: 42px;
    color: #000000;
  }
  .img {
    width: 60px;
    height: 60px;
    opacity:0.7; 
  }
  .input {
    width: 300px;
    height: 55px;
  }
</style>

